/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  Image,
  TouchableOpacity,
  Animated,
  Easing,
  View
} from 'react-native';


export default class NetErrorRefresh extends Component {
  constructor(props) {
    super(props);
    
    this.state ={
        rotateValue: new Animated.Value(0),
        status: false,
    };
    this.rotate =  this.state.rotateValue.interpolate({
        inputRange: [0, 1],
        outputRange: ['0deg', '360deg']
    })
  }

  _onPress(){
    this.setState({status: !this.state.status});

    this._animate();

    this.props.onPress == null ? console.warn("未设置异常处理") : this.props.onPress(this);
  }

  _animate(){
    this.state.rotateValue.setValue(0);
    Animated.timing(this.state.rotateValue, {
            toValue: 1,
            duration: 1000,
            easing: Easing.linear
        }
    ).start(() => {
        if (this.state.status){
            this._animate();
        }
    });

  }

  _stopRotate(){
    this.setState({status: false});
  }

  render() {
    return (
        <TouchableOpacity style={styles.container} onPress={this._onPress.bind(this)}>
            <Animated.Image
              style={{
                width: 30,
                height: 30,
                marginBottom: 8,
                transform: [{rotate: this.rotate}] }}
                source={require('../images/refresh.png')}
            />
            <Text style={styles.lineText}>{this.props.text == null ? '请点击重新加载' : this.props.text}</Text>
        </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent',//transparent
  },
  image: {
    marginBottom: 8,
    width: 30,
    height: 30
  },
  text: {
    textAlign: 'center',
    alignItems: 'center',
    fontSize: 18,
    color: "#00000065",
  },


});
